<template>
  <div class="chat-input-container">
    <!-- 工作流模式开关 -->
    <div class="workflow-settings">
      <label class="workflow-toggle">
        <input
          type="checkbox"
          v-model="useWorkflow"
          @change="onWorkflowChange"
          :disabled="loading"
        />
        <span class="toggle-label">
          <span class="toggle-icon">⚙️</span>
          <span>工作流模式（CoT + 工具调用）</span>
          <span v-if="useWorkflow" class="workflow-badge">已启用</span>
          <span v-else class="workflow-badge disabled">已禁用</span>
        </span>
      </label>
      
      <div v-if="useWorkflow" class="workflow-options">
        <div class="workflow-tip">
          💡 工作流模式会使用思维链和多个分析工具进行深度分析，AI会根据问题复杂度自动决定调用哪些工具
        </div>
      </div>
    </div>
    
    <textarea
      v-model="message"
      class="chat-input"
      :placeholder="useWorkflow ? '输入消息（将使用工作流模式分析）...' : '输入消息...'"
      @keyup.enter.exact="sendMessage"
      @keyup.enter.shift="addNewline"
      :disabled="loading"
    ></textarea>
    <div class="input-actions">
      <button 
        class="secondary" 
        @click="clearInput"
        :disabled="!message.trim() || loading"
      >
        清除
      </button>
      <button 
        class="primary" 
        :class="{ 'workflow-active': useWorkflow }"
        @click="sendMessage"
        :disabled="!message.trim() || loading"
      >
        <span v-if="loading" class="loading"></span>
        <span v-else>
          <span v-if="useWorkflow">🚀</span>
          发送
        </span>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue';
import { useStore } from '../store';

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(['send']);

const store = useStore();
const message = ref('');

// 从store获取工作流设置
const useWorkflow = ref(store.useWorkflow);

// 监听store变化
watch(() => store.useWorkflow, (val) => {
  useWorkflow.value = val;
});

const onWorkflowChange = () => {
  store.setUseWorkflow(useWorkflow.value);
};

const sendMessage = () => {
  const content = message.value.trim();
  if (content) {
    emits('send', content, useWorkflow.value);
    message.value = '';
  }
};

const clearInput = () => {
  message.value = '';
};

const addNewline = () => {
  message.value += '\n';
};
</script>

<style scoped>
.chat-input-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  border-top: 1px solid var(--border-color, #e0e0e0);
  background: linear-gradient(to top, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
  backdrop-filter: blur(10px);
}

.workflow-settings {
  padding: 0.75rem;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f0f8 100%);
  border-radius: 12px;
  border: 1px solid rgba(79, 172, 254, 0.2);
}

.workflow-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.workflow-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-right: 0.75rem;
  cursor: pointer;
  accent-color: #4facfe;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: #2c3e50;
  flex: 1;
}

.toggle-icon {
  font-size: 1.1rem;
}

.workflow-badge {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: auto;
  box-shadow: 0 2px 4px rgba(79, 172, 254, 0.3);
}

.workflow-badge.disabled {
  background: linear-gradient(135deg, #cccccc 0%, #aaaaaa 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.workflow-options {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(79, 172, 254, 0.2);
}

.workflow-tip {
  font-size: 0.85rem;
  color: #666;
  background: white;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border-left: 3px solid #4facfe;
}

.chat-input {
  min-height: 100px;
  resize: vertical;
  width: 100%;
  padding: 0.875rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.3s ease;
  background: white;
}

.chat-input:focus {
  outline: none;
  border-color: #4facfe;
  box-shadow: 0 0 0 4px rgba(79, 172, 254, 0.1);
}

.chat-input:disabled {
  background: #f5f5f5;
  cursor: not-allowed;
  opacity: 0.7;
}

.input-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.primary.workflow-active {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
  transition: all 0.3s ease;
}

.primary.workflow-active:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(79, 172, 254, 0.5);
}

.loading {
  margin-right: 0.5rem;
  vertical-align: middle;
}
</style>
